<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="/adminlte/layui/css/layui.css" media="all" />
	<style>
		.layui-table-cell {
			overflow: visible;
		}

		.layui-table-box {
			overflow: visible;
		}

		.layui-table-body {
			overflow: visible;
		}
		/* 设置下拉框的高度与表格单元相同 */

		td .layui-form-select {
			margin-top: -10px;
			margin-left: -15px;
			margin-right: -15px;
		}
	</style>
</head>

<body class="childrenBody">
<div style="padding:15px;">
	<form class="layui-form" id="fromId" action="#">
			<div id="selectTool" style="display: none">
			<select  name="selectDemo" lay-filter="selectDemo" lay-search  >
				<option value="">请选择地区</option>
			</select>
			</div>
		<div id="selectTool1" style="display: none">
			<select name="selectDemo1" lay-filter="selectDemo1" lay-search >
				<option value="">请选择供应商</option>

			</select>
		</div>
		<div id="selectTool2" style="display: none">
			<select name="selectDemo2" lay-filter="selectDemo2" lay-search>
				<option value="">请选择物料类别</option>
			</select>
		</div>
		<div id="selectTool3" style="display: none">
			<select name="selectDemo3" lay-filter="selectDemo3" lay-search>
				<option value="">请选择物料名称</option>

			</select>
		</div>
		<div id="selectTool4" style="display: none">
			<select name="selectDemo4" lay-filter="selectDemo4" lay-search>
				<option value="">请选择物料规格</option>
			</select>
		</div>
		<div id="selectTool5" style="display: none">
			<select name="selectDemo5" lay-filter="selectDemo5" lay-search>
				<option value="">请选择出库类别</option>
			</select>
		</div>
		<script type="text/html" id="toolbarDemo">
			<div align="left" class="layui-btn-container">
				<!--<button id="addTable" class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add">添加行</button>-->
			</div>
		</script>
		<script type="text/html" id="bar">
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
		<table id="demo" lay-filter="tableFilter"></table>
		<div class="layui-form-item" style="margin-top: 30px;text-align: center;">
			<button class="layui-btn" lay-submit="" lay-filter="*">保存</button>
			<!--<a href="" class="layui-btn">返回</a>-->
		</div>
	</form>
</div>
<script type="text/javascript" src="/adminlte/layui/layui.js"></script>
<script type="text/javascript" src="/adminlte/layui/jquery-3.2.1.min.js"></script>
<script>
	layui.use(['laydate', 'table', 'form', 'jquery','layer'], function() {
		var table = layui.table,
				form = layui.form,
				laydate = layui.laydate,
				layer=layui.layer,
				$ = layui.jquery;
		form.on('select(selectDemo)', function(data) {
			//这里是当选择一个下拉选项的时候 把选择的值赋值给表格的当前行的缓存数据 否则提交到后台的时候下拉框的值是空的
			var elem = data.othis.parents('tr');
			var dataindex = elem.attr("data-index");
			$.each(tabledata, function(index, value) {
				if(value.LAY_TABLE_INDEX == dataindex) {
					value.local = data.value;
				}
			});
		});
		form.on('select(selectDemo1)', function(data) {
			//这里是当选择一个下拉选项的时候 把选择的值赋值给表格的当前行的缓存数据 否则提交到后台的时候下拉框的值是空的
			var elem = data.othis.parents('tr');
			var dataindex = elem.attr("data-index");
			$.each(tabledata, function(index, value) {
				if(value.LAY_TABLE_INDEX == dataindex) {
					value.supplierName = data.value;
				}
			});
		});
		form.on('select(selectDemo2)', function(data) {
			//这里是当选择一个下拉选项的时候 把选择的值赋值给表格的当前行的缓存数据 否则提交到后台的时候下拉框的值是空的
			var elem = data.othis.parents('tr');
			var dataindex = elem.attr("data-index");
			$.each(tabledata, function(index, value) {
				if(value.LAY_TABLE_INDEX == dataindex) {
					value.goodsName = data.value;
				}
			});
		});
		form.on('select(selectDemo3)', function(data) {
			//这里是当选择一个下拉选项的时候 把选择的值赋值给表格的当前行的缓存数据 否则提交到后台的时候下拉框的值是空的
			var elem = data.othis.parents('tr');
			var dataindex = elem.attr("data-index");
			$.each(tabledata, function(index, value) {
				if(value.LAY_TABLE_INDEX == dataindex) {
					value.goodsType = data.value;
				}
			});
		});
		form.on('select(selectDemo4)', function(data) {
			//这里是当选择一个下拉选项的时候 把选择的值赋值给表格的当前行的缓存数据 否则提交到后台的时候下拉框的值是空的
			var elem = data.othis.parents('tr');
			var dataindex = elem.attr("data-index");
			$.each(tabledata, function(index, value) {
				if(value.LAY_TABLE_INDEX == dataindex) {
					value.specifications = data.value;
				}
			});
		});
		form.on('select(selectDemo5)', function(data) {
			//这里是当选择一个下拉选项的时候 把选择的值赋值给表格的当前行的缓存数据 否则提交到后台的时候下拉框的值是空的
			var elem = data.othis.parents('tr');
			var dataindex = elem.attr("data-index");
			$.each(tabledata, function(index, value) {
				if(value.LAY_TABLE_INDEX == dataindex) {
					value.outStockType = data.value;
				}
			});
		});

		//第一个实例 加载表格
		var tableIns = table.render({
			elem: '#demo',
			/*toolbar: '#toolbarDemo',*/
		/*	defaultToolbar: ['filter', 'print', 'exports'],*/
			limit: 150,
			cols: [
				[ //表头
					{
						field: 'local',
						title: '所在地区',
						templet: '#selectTool'
					}, {
					field: 'supplierName',
					title: '供应商名称',
					templet: '#selectTool1'
				}, {
					field: 'goodsType',
					title: '物料类别',
					templet: '#selectTool2'
				}, {
					field: 'goodsName',
					title: '物料名称',
					templet: '#selectTool3'
				}, {
					field: 'specifications',
					title: '物料规格',
					templet: '#selectTool4'
				}, {
					field: 'outStockType',
					title: '出库分类',
					templet: '#selectTool5'
				},{
					field: 'nums',
					title: '出库数量',
					edit: 'text'
				},  {
					field: 'remarks',
					title: '备注',
					edit: 'text'
				}/*, {
					title: '操作',
					align: 'center',
					toolbar: '#bar'
				}*/
				]
			],
			data: [{
				"local": "",
				"supplierName": "",
				"goodsType": "",
				"goodsName": "",
				"specifications": "",
				"outStockType": "",
				"nums": "",
				"remarks": ""
			},{
				"local": "",
				"supplierName": "",
				"goodsType": "",
				"goodsName": "",
				"specifications": "",
				"outStockType": "",
				"nums": "",
				"remarks": ""
			},{
				"local": "",
				"supplierName": "",
				"goodsType": "",
				"goodsName": "",
				"specifications": "",
				"outStockType": "",
				"nums": "",
				"remarks": ""
			},{
				"local": "",
				"supplierName": "",
				"goodsType": "",
				"goodsName": "",
				"specifications": "",
				"outStockType": "",
				"nums": "",
				"remarks": ""
			},{
				"local": "",
				"supplierName": "",
				"goodsType": "",
				"goodsName": "",
				"specifications": "",
				"outStockType": "",
				"nums": "",
				"remarks": ""
			},{
				"local": "",
				"supplierName": "",
				"goodsType": "",
				"goodsName": "",
				"specifications": "",
				"outStockType": "",
				"nums": "",
				"remarks": ""
			},{
				"local": "",
				"supplierName": "",
				"goodsType": "",
				"goodsName": "",
				"specifications": "",
				"outStockType": "",
				"nums": "",
				"remarks": ""
			},{
				"local": "",
				"supplierName": "",
				"goodsType": "",
				"goodsName": "",
				"specifications": "",
				"outStockType": "",
				"nums": "",
				"remarks": ""
			},{
				"local": "",
				"supplierName": "",
				"goodsType": "",
				"goodsName": "",
				"specifications": "",
				"outStockType": "",
				"nums": "",
				"remarks": ""
			},{
				"local": "",
				"supplierName": "",
				"goodsType": "",
				"goodsName": "",
				"specifications": "",
				"outStockType": "",
				"nums": "",
				"remarks": ""
			},{
				"local": "",
				"supplierName": "",
				"goodsType": "",
				"goodsName": "",
				"specifications": "",
				"outStockType": "",
				"nums": "",
				"remarks": ""
			},{
				"local": "",
				"supplierName": "",
				"goodsType": "",
				"goodsName": "",
				"specifications": "",
				"outStockType": "",
				"nums": "",
				"remarks": ""
			}]
			,
			done: function(res, curr, count) {
				//如果是异步请求数据方式，res即为你接口返回的信息。
				//如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
				tabledata = res.data;
				//去掉下拉框的失焦事件 否则在下拉框里输入值 失焦后变回下拉选项里的值了 没有需要的同学忽略掉即可
				$('.layui-form-select').find('input').unbind("blur");
				//这里是表格重载的时候 回显下拉框的数据
				$('tr').each(function(e) {
					var $cr = $(this);
					var dataindex = $cr.attr("data-index");
					$.each(tabledata, function(index, value) {
						if(value.LAY_TABLE_INDEX == dataindex) {
							$cr.find('input').val(value.materialcode);
						}
					});
				});
			}
		});
		var tabledata;
		//监听工具条删除按钮
		table.on('tool(tableFilter)', function(obj) {
			if(obj.event === 'del') {
				obj.del();
			};
		});

		//头工具栏添加按钮事件
		table.on('toolbar(tableFilter)', function(obj) {
			if(obj.event === 'add') {
				tabledata.push({
					"local": "",
					"supplierName": "",
					"goodsType": "",
					"goodsName": "",
					"specifications": "",
					"nums": "",
					"outStockType": "",
					"remarks": ""
				});

				table.reload('demo', {
					data: tabledata
				});

			}
		});
		//提交数据到后台保存
		form.on('submit(*)', function(data) {
			// console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
			// console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
			//  console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
		/*	console.log(JSON.stringify(tabledata));//当前容器的全部表单字段，名值对形式：{name: value}
			console.log($("[name='selectDemo']").html());*/
			$.ajax({
				url: "/goodsOut/addGoodsOutStock",
				async: true,
				type: "post",
				data: {tabledata:JSON.stringify(tabledata)},
				dataType: "json",
				success: function(result) {
					if(result.success >0) {
						var list =result.date;
						var str="操作成功\n";
						$.each(list,function(i,val){
							str=str+val+"\n";
						});
						alert(str);
						layer.msg(str, {
							btnAlign: 'c',
							time: 10000, //20s后自动关闭
							btn: ['确定']
						});
						var index = parent.layer.getFrameIndex(window.name);
						parent.layer.close(index);
					} else {
						console.log(result.date);
						alert("系统错误");
					}
				}
			});
			return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
		});
	});
	$(
			function () {
				loadSelect();
				supplierNameSearch();
				goodsTypes();
				goodsNames();
				specificationss();
				outTyp();
			}
	)
	function outTyp() {
		$.ajax({
			//几个参数需要注意一下
			type: "POST",//方法类型
			dataType: "json",//预期服务器返回的数据类型
			url: "/queryLocal" ,//url
			data:{pid:207},
			success: function (result) {
				if (result.success>0) {
					var list =result.date;
			/*		$("[name='outStockType']").empty();
				/!*	var op="";
					var bp="请选择出库类别";
					$("[name='outStockType']").append("<option value="+op+">"+bp+"</option>");*!/*/
					$.each(list,function (i,val) {
						$("[name='selectDemo5']").append("<option value="+val+">"+val+"</option>");
					});
				}else{
					alert("信息错误");
				}
			}
		});
	}
	function loadSelect() {
		$.ajax({
			//几个参数需要注意一下
			type: "POST",//方法类型
			dataType: "json",//预期服务器返回的数据类型
			url: "/goodStock/locals" ,//url
			success: function (result) {
				if (result.success>0) {
					var list =result.date;
					$.each(list,function (i,val) {
						$("[name='selectDemo']").append("<option value="+val+">"+val+"</option>");
					});
				}else{
					alert("地址信息错误");
				}
			},
			error : function() {
				alert("异常！");
			}
		});
	}
	function supplierNameSearch() {
		$.ajax({
			//几个参数需要注意一下
			type: "POST",//方法类型
			dataType: "json",//预期服务器返回的数据类型
			url: "/goodStock/supplierNames" ,//url
			success: function (result) {
				if (result.success>0) {
					var list =result.date;
					$.each(list,function (i,val) {
						$("[name='selectDemo1']").append("<option value="+val+">"+val+"</option>");
					});
				}else{
					alert("供应商信息错误");
				}
			},
			error : function() {
				alert("异常！");
			}
		});

	}
	function goodsTypes() {
		$.ajax({
			//几个参数需要注意一下
			type: "POST",//方法类型
			dataType: "json",//预期服务器返回的数据类型
			url: "/goodStock/goodsTypes" ,//url
			success: function (result) {
				if (result.success>0) {
					var list =result.date;
					$.each(list,function (i,val) {
						$("[name='selectDemo2']").append("<option value="+val+">"+val+"</option>");
					});
				}else{
					alert("类别信息错误");
				}
			},
			error : function() {
				alert("异常！");
			}
		});
	}
	function goodsNames() {
		$.ajax({
			//几个参数需要注意一下
			type: "POST",//方法类型
			dataType: "json",//预期服务器返回的数据类型
			url: "/goodStock/goodsNames" ,//url
			success: function (result) {
				if (result.success>0) {
					var list =result.date;
					$.each(list,function (i,val) {
						$("[name='selectDemo3']").append("<option value="+val+">"+val+"</option>");
					});
				}else{
					alert("名称信息错误");
				}
			},
			error : function() {
				alert("异常！");
			}
		});
	}
	function specificationss() {
		$.ajax({
			//几个参数需要注意一下
			type: "POST",//方法类型
			dataType: "json",//预期服务器返回的数据类型
			url: "/goodStock/specificationss" ,//url
			success: function (result) {
				if (result.success>0) {
					var list =result.date;
					$.each(list,function (i,val) {
						$("[name='selectDemo4']").append("<option value="+val+">"+val+"</option>");
					});
				}else{
					alert("规格信息错误");
				}
			},
			error : function() {
				alert("异常！");
			}
		});
	}

</script>

</body>

</html>